<template>
  <div class="login">
    <div class="from" v-if="login">
      <div class="logs">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fis3.mzstatic.com%2Fimage%2Fthumb%2FPurple111%2Fv4%2Ffe%2F76%2Fc5%2Ffe76c523-45c1-b62f-6202-88b53e089cda%2Fsource%2F512x512bb.jpg&refer=http%3A%2F%2Fis3.mzstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644110815&t=a85265a5b6db2e8e98ffa9eb1c91f3a5"
          alt=""
          width="100%"
          height="100%"
        />
      </div>
      <div class="username">
        <input
          type="text"
          placeholder="用户名"
          v-model="username"
        />
        <div class="iconfont icon-guanbi1"></div>
      </div>
      <div class="password">
        <input
          :type="seePassword ? 'text' : 'password'"
          placeholder="密码"
          v-model="password"
        />
        <div
          :class="[
            'iconfont',
            seePassword ? 'icon-faxianxianshimima' : 'icon-guanbi',
          ]"
          @click="seePassword = !seePassword"
        ></div>
      </div>
      <div class="btn" @click="logins">登录</div>
      <div class="btn" @click="login = !login">注册</div>
      <div class="qtLogin">其他登录方式登录</div>
      <div class="log">
        <div class="iconfont icon-weibo"></div>
        <div class="iconfont icon-zhifubao"></div>
        <div class="iconfont icon-weixin"></div>
        <div class="iconfont icon-weixin"></div>
      </div>
    </div>
    <div class="from zc" v-if="!login">
      <div class="username">
        <input
          type="text"
          placeholder="用户名"
          v-model="setUserName"
        />
        <div class="iconfont icon-guanbi1"></div>
      </div>
      <div class="password">
        <input
          :type="seePassword ? 'text' : 'password'"
          placeholder="密码"
          v-model="setPassword"
        />
        <div
          :class="[
            'iconfont',
            seePassword ? 'icon-faxianxianshimima' : 'icon-guanbi',
          ]"
          @click="seePassword = !seePassword"
        ></div>
      </div>
      <div class="password">
        <input
          :type="seePassword ? 'text' : 'password'"
          placeholder="确认登陆密码"
          v-model="setPasswords"
        />
        <div
          :class="[
            'iconfont',
            seePassword ? 'icon-faxianxianshimima' : 'icon-guanbi',
          ]"
          @click="seePassword = !seePassword"
        ></div>
      </div>
      <div class="btn" @click="addEdit">注册</div>
      <div class="btn" @click="login = !login">返回</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      seePassword: false,
      login: true,
      setUserName: "",
      setPassword: "",
      setPasswords: "",
    };
  },
  methods: {
    addEdit() {
      let user = window.localStorage.getItem("user");
      console.log(user);
      if (
        /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.setUserName) &&
        /^[a-zA-Z]\w{5,17}$/.test(this.setPassword) &&
        this.setPassword == this.setPasswords
      ) {
        let user = window.localStorage.getItem("user");
        user = JSON.parse(user);
        let data = {
          username: this.setUserName,
          password: this.setPassword,
        };
        if (user) {
          user.forEach((item) => {
            if (item.username == this.setUserName) {
              console.log("账号已存在,请登录!");
              this.login = true;
              return;
            } else {
              user.push(data);
              window.localStorage.setItem("user", JSON.stringify(user));
            }
          });
        } else {
          this.login = true;
          window.localStorage.setItem("user", JSON.stringify([data]));
        }
      } else {
        console.log("输入不合法!");
      }
      this.setUserName = this.setPassword = this.setPasswords = "";
      
    },
    logins() {
      console.log("object");
      let user = window.localStorage.getItem("user");
      user = JSON.parse(user);
      let _this = this;
      user.forEach((item) => {
        let { username, password } = item;
        if (username == _this.username && password == _this.password) {
          console.log("登陆成功");

          window.localStorage.setItem("token", this.username);
          this.$router.push({ path: "/userinfo" });
          this.username = this.password = "";
        }
      });
    },
  },
};
</script>

<style lang="less">

.login {
  height: 100%;
  background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202101%2F27%2F20210127191746_2ad3d.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643879226&t=932cd5063c3fd33c82e45bf822ca38e4");
  .from {
    &.zc{
      padding: 150px 50px;
    }
    padding: 50px;
    color: #fff;
    .logs {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin: auto;
      border-radius: 50%;
      overflow: hidden;
    }
    .username,
    .password {
      height: 55px;
      width: 100%;
      line-height: 55px;
      margin: 30px 0;
      position: relative;
      input {
        border: none;
        display: block;
        background: none;
        border-bottom: 1px solid #ccc;
        width: 100%;
        &::placeholder {
          color: #fff;
          font-size: 14px;
        }
      }
      div {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .btn {
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      background: #df3d3d;
      border-radius: 4px;
      margin-bottom: 10px;
    }
    .qtLogin {
      margin-top: 30px;
     height: 0.78125rem;
    display: flex;
    font-size: 0.590278rem;
    align-items: center;
      &::before {
        flex: 1;
        content: "";
        margin-right: 0.798611rem;
        border-bottom: 1px solid #969799;
      }
      &::after {
        flex: 1;
        content: "";
        margin-left: 0.798611rem;
        border-bottom: 1px solid #969799;
      }
    }
    .log{
      display: flex;
      text-align: center;
      margin-top: 30px;
      
      div{
        flex: 1;
        font-size: 40px;
      }
    }
  }
}
</style>